<script setup>
import Content from './component/Content.vue'
import Left from './component/Left.vue'
import Right from './component/Right.vue'
import { ref } from 'vue'

const textBlocks = ref([])
const selectedBlockId = ref(null)

const rightPanelData = ref({
  title: '',
  desc: '',
  textAlign: 'left',
  titleSize: '16',
  subTitleSize: '12',
  titleWeight: 'bold'
})

const updateRightPanelData = (data) => {
  rightPanelData.value = { ...rightPanelData.value, ...data }
  
  // 如果有选中的文本块，同步更新该文本块的数据
  if (selectedBlockId.value) {
    const blockIndex = textBlocks.value.findIndex(block => block.id === selectedBlockId.value)
    if (blockIndex !== -1) {
      textBlocks.value[blockIndex] = { ...textBlocks.value[blockIndex], ...data }
    }
  }
}

const addTextBlock = () => {
  if (textBlocks.value.length < 5) {
    const newBlock = {
      id: Date.now(),
      title: '',
      subtitle: '',
      textAlign: 'left',
      titleSize: '16',
      subTitleSize: '12',
      titleWeight: 'bold'
    }
    textBlocks.value.push(newBlock)
    
    // 自动选中新创建的文本块
    selectBlock(newBlock.id)
  }
}

const selectBlock = (blockId) => {
  selectedBlockId.value = blockId
  const selectedBlock = textBlocks.value.find(block => block.id === blockId)
  if (selectedBlock) {
    // 将选中文本块的数据同步到右侧面板
    rightPanelData.value = {
      title: selectedBlock.title,
      subtitle: selectedBlock.subtitle,
      textAlign: selectedBlock.textAlign,
      titleSize: selectedBlock.titleSize,
      subTitleSize: selectedBlock.subTitleSize,
      titleWeight: selectedBlock.titleWeight
    }
  }
}
</script>

<template>
  <div class="container">
    <Left class="left-panel" @add-text-block="addTextBlock" />
    <Content class="content-panel" :text-blocks="textBlocks" :selected-block-id="selectedBlockId" @select-block="selectBlock"/>
    <Right class="right-panel" @update-data="updateRightPanelData" :current-data="rightPanelData" :has-selected-block="!!selectedBlockId"/>
  </div>
  <div class="save-container">
    <button>保存</button>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  height: 100%;
}

.left-panel {
  flex: 0 0 20%;
}

.content-panel {
  flex: 0 0 50%;
  background: #f0f0f0;
}

.right-panel {
  flex: 0 0 30%;
}

.save-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #e8e8e8;
}

button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: 50px;
  background-color: #ff7a00;
  font-size: 24px;
  color: white;
  border: none;
}
</style>